<template>
<div class="box2">
    <el-form :model="ruleForm" :rules="rules" :inline="false" ref="ruleForm" label-width="200px" class="demo-ruleForm" size="medium">
        <div class="must">
            <!-- <el-form-item label="联系人：" prop="contacts">
                <el-input v-model="ruleForm.contacts" placeholder="请填写名称或姓名"></el-input>
                <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>示例：张三</span>
                    </div>
                </div>
            </el-form-item> -->

            <el-form-item label=" 商标申请号/注册号" prop="appCode">
                <el-input v-model="ruleForm.appCode" placeholder="请填写"></el-input>
                <!-- <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：商标申请号/注册号不能为空</span>
                    </div>
                </div> -->
            </el-form-item>

            <div class="line"></div>
            <!--<el-form-item label="商标类别：" prop="category">-->
                <!--<el-input class="type-number" v-model="ruleForm.category" placeholder="请填写类别"></el-input>-->
                <!--&lt;!&ndash; <div class="inform">-->
                    <!--<img src="../../assets/imgs/inform.png" alt="通知" />-->
                    <!--<div class="content">-->
                        <!--<span>提醒：类别不能为空</span>-->
                    <!--</div>-->
                <!--</div> &ndash;&gt;-->
            <!--</el-form-item>-->
            <el-form-item label="商标类别：" prop="category">
                <el-input class="type-number" v-model.number="ruleForm.category" placeholder="请填写类别（1-45之间）" ></el-input>
                <div class="informm" style="margin-left:-45%">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <!-- <span>提示：类别只能是1--45，否则为错误</span> -->
                        <span>请前往<a target="_blank" style="color:#2c9dfc;cursor:pointer; text-decoration:none" href="http://sbj.cnipa.gov.cn/sbcx/">官网</a>点击“我接受”->商标/服务项目</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item class="upload" label="网上确认书：" prop="category">
              <div class="imgShow" style="display: inline-block">
                <upfile :callback="setSure">
                  <img :src="img_default['qrfile']" v-if="img_default['qrfile']" />
                </upfile>
              </div>
              <div class="exam-img" style="display: flex; position: absolute; top: 0;left:475px">
                  <div class="img-inform" style="position: absolute; top: 50%; left: 50%;  margin-left: -60px; transform: translate(-50%,-50%);">
                      <img src="../../assets/imgs/inform.png" style="display: inline-block; margin-right: 10px">
                      <span>示例:</span>
                  </div>
                  <examimg :imgType="4"></examimg>
              </div>
                <div class="specification">
                    <span class="informs">
                        请点此
                        <a :href="mconfig.host + '/file/download?fileType=2'">下载网上确认书</a>,查到相应商标编号并填充
                    </span>
                    <br />
                    <span class="notice">请将下载的网上确认书填写完成, 然后上传JPG文件或是PNG文件</span>
                </div>
            </el-form-item>
            <el-form-item label="其他附件：">
              <uploads
                  :callback="backUrl"
                  :delUrl="delUrl"
                  :file_config="{field:'dengjichenluofile'}"
                  :list="ruleForm.dengjichenluofile"></uploads>
              <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知" />
                <div class="content">
                  <span>提示：其他附件</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="需重新制发证书文件" prop="makeStatus">
                <el-radio-group v-model="ruleForm.makeStatus" fill="#409EFF">
                    <el-radio class="input" :label="1"  style="width:100px">是</el-radio>
                    <el-radio class="input" :label="0">否</el-radio>
                </el-radio-group>
                <!-- <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：选项不能为空</span>
                    </div>
                </div> -->
            </el-form-item>
            <el-form-item label="更正事项" prop="eventCorr">
                <el-input type="textarea" rows="4" v-model="ruleForm.eventCorr"></el-input>
                <!-- <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：内容不能为空</span>
                    </div>
                </div> -->
            </el-form-item>
            <div class="btns">
                <el-button type="primary" @click="outStep">上一步</el-button>
                <el-button type="primary" @click="testing('ruleForm')">提交并审核</el-button>
            </div>
            <el-dialog class="dialog" :show-close="false" :center="true" :visible.sync="dialogVisible" width="460px" :before-close="handleClose">
                <div class="hint">
                    <img src="../../assets/imgs/branch.png" alt="提示图片" />
                    <span>选择您想去办理的网点</span>
                </div>
                <el-form-item label="选择网点：">
                    <el-select v-model="ruleForm.branchNetworkId" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.deptId" :label="item.deptName" :value="item.deptId">
                            <span style="float: left">{{ item.deptName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.address }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false" class="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog class="hintMsg" :show-close="false" title="温馨提示" :visible.sync="centerDialogVisible" width="462px" :before-close="handleClose">
                <span>您的信息已提交，工作人员将在3-5日内对你的信息审核，审核通过后即可预约业务，审核结果将通过短信的方式发送给你。</span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="skip">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </el-form>
</div>
</template>

<script>
import upfile from "../common/upfile.vue";
import { mapState } from "vuex";
import examimg from "../common/imgExample";
import uploads from "@/components/common/uploads";
export default {
    components: {
        upfile,
        examimg,
        uploads,
    },
    data() {
        return {
            //网点列表
            options: [],
            //提交成功弹出框变量
            centerDialogVisible: false,
            //网点弹出框控制变量
            dialogVisible: false,
            //提交表单
            formData: new FormData(),
            //表单唯一id
            classId: "",

            // 是否有网上确认书
            showImg: "",
            //填写的信息
            ruleForm: {
                contacts: "", //联系人
                appCode: "", //商标申请号/注册号
                makeStatus: 0, //需重新制发证书文件
                eventCorr: "", //更正事项
                branchNetworkId: "", //网点编号
                category: "", //类别
                qrfiles: "", // 网上确认书
                dengjichenluofile: []
            },
            rules: {
                // 其他附件
                dengjichenluofile: [
                  { required: true, message: "附件不能为空", trigger: "change" },
                ],
                // contacts: [
                //     { required: true, message: "选项不能为空", trigger: "change" },
                //     { pattern: /^[\u4E00-\u9FA5A-Za-z]{2,30}$/, message: "名字输入错误" },
                // ],
                // upload: [
                //   { required: true, message: "选项不能为空1", trigger: "change" },
                // ],
                appCode: [
                    { required: true, message: "选项不能为空2", trigger: "change" },
                    { pattern: /^[0-9]*$/, message: "请输入正确商标号" },
                    // { pattern: /^[0-9]*$/, message: '请输入正确的申请号' }
                ],
                category: [
                    { required: true, message: "商标类别不能为空", trigger: "change" },
                    {pattern: /^\d{0,30}$/,message: "请输入正确商标号",trigger: "blur"},
                ],
                makeStatus: [
                    { required: true, message: "选项不能为空4", trigger: "change" },
                ],
                // branchNetworkId: [
                //   { required: true, message: "选项不能为空", trigger: "change" },
                // ],
                eventCorr: [
                    { required: true, message: "选项不能为空5", trigger: "change" },
                ],
            },
            img_default: {},
        };
    },
    computed: {
        ...mapState(["alterData"]),
    },
    methods: {
        // 上传网上确认书
        //  setSure(files){
        //   this.uploadImg = true
        //   this.ruleForm.qrfile=files[0]
        //   this.showImg = false
        // },
        backUrl(url,file_config){
          this.ruleForm[file_config["field"]].push(url)
        },
        delUrl(index,file_config){
          this.ruleForm[file_config["field"]].splice(index,1)
          this.$set(this.ruleForm,file_config["field"],this.ruleForm[file_config["field"]])
        },
        //确认书
        setSure(files) {
            this.ruleForm.qrfiles = files[0];
            this.img_default = {};
            if (this.ruleForm.qrfiles) {
                this.showImg = true;
            } else {
                this.showImg = false;
            }
        },
        //返回上一步
        outStep() {
            this.$emit("wp", 1, "请填写申请业务信息");
        },
        //提示模板
        open1(msg, types = "success") {
            this.$message({
                message: msg,
                type: types,
            });
        },

        //弹出框的选项确认框
        handleClose(done) {
            // this.$confirm("确认关闭")
            //   .then((_) => {
            //     done();
            //   })
            //   .catch((_) => {});
        },

        // 提交前验证
        testing(formName) {
            this.$refs[formName].validate((valid) => {

                if (valid == false) {
                    this.dialogVisible = false;
                } else {
                    if (this.showImg) {
                        this.dialogVisible = true;
                    } else {
                        this.open1("网上确认书未上传", "error");
                    }
                }
            });
            //  console.log(this.showImg);
        },

        //表单提交事件
        submitForm(formName) {
            let _this = this;

            this.$refs[formName].validate((valid) => {
                // ////console.log(valid);
                if (valid && this.ruleForm.branchNetworkId) {
                    //每次提交重新生成新的FormData用于储存新的数据
                    this.formData = new FormData();
                    this.dialogVisible = false;
                    /*************************************公共数据开始******************************************/
                    let arr = this.$store.getters.getRuleForm;
                    for (let key in arr) {
                        this.formData.append(key, arr[key]);
                    }
                    /*************************************公共数据结束******************************************/

                    /*************************************需要提交的数据开始******************************************/
                    this.formData.append("appCode", this.ruleForm.appCode);
                    this.formData.append("appliType", Number(this.$store.state.type));
                    this.formData.append(
                        "branchNetworkId",
                        this.ruleForm.branchNetworkId
                    );
                    this.formData.append("category", this.ruleForm.category);
                    this.formData.append("classId", this.classId);
                    this.formData.append("contacts","联系人");// this.ruleForm.contacts
                    this.formData.append("eventCorr", this.ruleForm.eventCorr);
                    this.formData.append("makeStatus", this.ruleForm.makeStatus);
                    this.formData.append("optype", 1);

                    // 其他附件
                    this.formData.append('otherfile', JSON.stringify(this.ruleForm.dengjichenluofile));
                    if (this.img_default["qrfile"]) {
                        this.formData.append("qrfiles", {});
                    } else {
                        this.formData.append("qrfiles", this.ruleForm.qrfiles);
                    }

                    /*************************************需要提交的数据结束******************************************/

                    let urls = "";
                    if (this.$store.state.alterData.public) {
                        this.formData.append("id", this.$store.state.alterData.public.id);
                        urls = "trademark/proTCorrection/modifyNoCommit";
                    } else {
                        urls = "trademark/proTCorrection/firstSubmit";
                    }
                    //配置请求头
                    var config = {
                        header: {
                            "Content-Type": "multipart/form-data",
                        },
                    };
                    // axios向后端发送数据
                    this.$http
                        .post(urls, this.formData, config)
                        .then(function (response) {
                            //若状态码不为200则不跳转
                            if (response.data.code != 200) {
                                _this.open1("提交失败", "error");
                                return;
                            }
                            _this.centerDialogVisible = true;
                        })
                        .catch(function (error) {});
                } else {
                    this.open1("请选择网点", "error");
                    return false;
                }
            });
        },
        //跳转函数
        skip() {
            this.centerDialogVisible = false;
            this.open1("操作成功");
            this.$router.push({
                path: "/business/myBusiness/auditing",
            });
        },
        //点击添加更变许可人
        plus() {
            let objCommom = JSON.parse(JSON.stringify(this.ruleForm.commonArr[0]));
            this.ruleForm.commonArr.push(objCommom);
            //let objValue = JSON.parse(JSON.stringify(this.common[0]))
            this.common.push({
                name: "名称(中文)：",
                englishName: "(英文)：",
                site: "地址(中文)：",
                englishSite: "(英文)：",
                value: "",
                englishValue: "",
                siteValue: "",
                englishSiteValue: "",
            });
        },
    },
    mounted() {
        if (this.$store.state.stateJdg) {
            this.showImg = true
        }
        //获取从存储在路由中的classId
        this.classId = this.$route.query.id;
        //获取网点列表
        this.$http.get("trademark/system/dept/findDept").then((res) => {
            ////console.log(res.data.data);
            this.options = res.data.data;
        });
        if (this.$store.state.alterData.public) {
            let formDa = {};
            let category = this.$store.state.alterData.data.category;
            Object.assign(
                formDa,
                this.$store.state.alterData.data,
                this.$store.state.alterData.public
            );

            let {
                // contacts, //联系人
                // nameAgen, //代理机构名称
                appCode, //商标申请号/注册号 //类别
                makeStatus, //需重新制发证书文件
                branchNetworkId, //网点编号
                eventCorr, //更正事项
                qrfile, //确认书
              otherfile, // 其他附件
            } = formDa;
            // (this.ruleForm.contacts = contacts), //联系人
            (this.ruleForm.appCode = appCode),
            (this.ruleForm.makeStatus = makeStatus * 1), //是否共有商标
            (this.ruleForm.category = category), //外国受让人的国内接收人
            (this.ruleForm.eventCorr = eventCorr), //国内接收人地址
            (this.ruleForm.branchNetworkId = String(branchNetworkId)); //网点编号
            // 其他附件
            this.ruleForm.dengjichenluofile = JSON.parse(otherfile);
            if (qrfile) {
                this.img_default.qrfile = this.mconfig.host + qrfile;
            }
            console.log(this.$store.state.alterData, 9999999);
        }
    },
};
</script>

<style lang="less" scoped>
.btns {
    display: flex;
    justify-content: center;

    .el-button {
        margin: 0 20px;
    }
}

.box2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-left: -192px;
    min-height: 800px;

    .tle {
        font-size: 24px;
        color: #000;
    }

    .el-form {
        width: 100%;
    }

    .must,
    .select {
        display: flex;
        position: relative;
        left: -60px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 0 30px;
        border-radius: 10px;

        .inform {
            display: flex;
            align-items: center;
            position: absolute;
            top: 0;
            left: 100%;
            width: 250px;
            height: 32px;
            color: #f96900;
            font-size: 10px;
            line-height: 16px;

            img {
                margin: 11px;

            }

            .content {
                display: flex;
                flex-direction: column;

                .ts {
                    text-indent: 3em;
                }
            }
        }

        .el-form-item {
            width: 580px;
        }

        .inline {
            display: flex;

            .el-form-item {
                margin: 0;
                width: 290px !important;
            }

            margin-bottom: 22px;
        }
    }

    .must {
        margin-bottom: 20px;
    }

    .line {
        width: calc(100% - 280px);
        margin: 10px auto;
        height: 1px;
        border-top: 1px dashed #d9d9d9;
    }

    .imgHint {
        margin: 5px;
        font-size: 12px;
        line-height: 17px;
        color: #f96900;
    }

    .affirm {
        font-size: 12px;
        color: #a0a3a5;

        a {
            text-decoration: none;
            color: #3685ff;
        }
    }

    .input {
        width: 190px;
    }

    .upload {
        margin: 20px 0;
    }

    .type-number {
        width: 250px;
    }

    .informs {
        position: absolute;
        width: 500px;
        font-size: 12px;
        color: #a0a3a5;

        a {
            text-decoration: none;
            color: #3685ff;
        }
    }

    .notice {
        color: #f00;
        font-size: 12px;
    }

    .tle {
        list-style: none;
        margin: 40px 0 20px;
        font-size: 24px;

        &~.tle {
            color: #bbb;
        }
    }

    .hint {
        color: #f96900;
        background-color: #fff;
        padding: 20px;
        padding-top: 0;
        padding-left: 0;

        .el-form-item__label {
            width: 150px;
        }

        img {
            width: 20px;
             margin-left: -2px;
        }
    }

    .el-steps {
        width: 70%;
        height: 200px;
    }

    .el-button {
        display: inline;
        // margin: 0 20px;
    }

    .common .el-button {
        background-color: #fff !important;
        border-color: #bbb !important;
    }
}

.dialog-footer {
    display: flex;
    justify-content: space-between;
    color: #fff;

    .lan {
        background-color: #2c9dfc !important;
        border-color: #2c9dfc !important;
    }
}

.dialog /deep/.el-form-item__label {
    width: 90px !important;
    text-align: left;
    padding-right: 0;
}

.dialog /deep/.el-form-item__content {
  margin-left: 70px !important;
  display: flex;
  justify-content: left;
}

.dialog /deep/.el-input {
    width: 250px;
}

.el-checkbox-group {
    line-height: 14px;
}
// .is-checked/deep/.el-checkbox__inner,
.is-checked/deep/.el-radio__inner{
    border-radius: 1 !important;
 }

.el-radio/deep/.el-radio__inner:hover {
    border-color: #999999 !important;
}

.is-checked/deep/.el-radio__label,
.is-checked/deep/.el-checkbox__label {
    color: #333;
}

.is-focus .el-checkbox__inner {
    border-color: #999999 !important;
}

.el-checkbox/deep/.el-checkbox__inner:hover {
    border-color: #999999 !important;
}

.el-step__head.is-process {
    border-color: #f96900;
    color: #f96900 !important;
}

.hintMsg {
    /deep/.el-dialog__header {
        display: flex;
        justify-content: center;
        font-weight: bold;

    }

    .dialog-footer {
        justify-content: center;

        .el-button {
            border-color: #2c9dfc !important;
            background: #2c9dfc !important;
        }
    }
}

.cancel {
    background: #ccc;
    border-color: #ccc;
}
/deep/.el-dialog--center .el-dialog__body{
padding: 20px;
}
/deep/.el-dialog__footer {
    padding: 20px;
}
/deep/.el-dialog__header {
    padding: 0;
}
/deep/.el-dialog__title{
    margin-top: 20px;
}
.specification {
    margin-top: 5px;
}
#star{
  position: absolute;
  color: red;
  margin-left: -105px;
}
.informm {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 112%;
    width: 250px;
    height: 32px;
    color: #F96900;
    font-size: 10px;
    line-height: 14px;
    margin-left: -20%;

    img {
        margin: 11px;
    }

    .content {
        display: flex;
        flex-direction: column;
        position: relative;

        .ts {
            text-indent: 3em;
        }
    }
 
  .exam-img{
  position: absolute;
  top: 0;
  left: 450px;
}
.img-inform{
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -140px;
    transform: translate(-50%,-50%);
  }
  span{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      white-space: nowrap;
      margin-left: -100px;
      width: 50px;
      color: #f96900;
  }
}
  // .img-inform {
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;

  //   img {
  //     margin-right: 10px;
  //   }

  //   span {
  //     font-size: 12px;
  //     width: 50px;
  //     color: #f96900;
  //   }
  // }
  .imgShow {
    display: inline-block !important;
  }
}
img {
  //object-fit: contain;
  //width: 100%;
  //height: 100%;
}

</style>
